<template>
  <div>
    <!-- 顶部筛选栏 -->
    <el-card class="filter-bar" shadow="never">
      <el-row :gutter="20" align="middle">
        <el-col :span="4">
          <el-select placeholder="请选择类型" style="width: 100%;">
            <el-option label="比赛获奖" value="award" />
            <el-option label="论文" value="paper" />
            <el-option label="专利" value="patent" />
            <el-option label="软著" value="software" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="请选择层次" style="width: 100%;">
            <el-option label="院级" value="院级" />
            <el-option label="校级" value="校级" />
            <el-option label="省级" value="省级" />
            <el-option label="国家级" value="国家级" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="请选择个人/集体" style="width: 100%;">
            <el-option label="个人" value="个人" />
            <el-option label="集体" value="集体" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%;"
          />
        </el-col>
        <el-col :span="2">
          <el-button type="success" style="width: 100%;">筛选</el-button>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <el-button type="primary" style="background: #7c6aed; border: none;">
            <i class="el-icon-plus"></i> 上传成果
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="margin-top: 24px;" header-cell-class-name="table-header">
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="myRole" label="我的参与" align="center" />
      <el-table-column prop="others" label="其他参与人员" align="center" />
      <el-table-column prop="level" label="获奖层级" align="center" />
      <el-table-column prop="date" label="创建时间" align="center" />
      <el-table-column prop="rank" label="获奖等级" align="center" />
      <el-table-column prop="teacher" label="指导老师" align="center" />
      <el-table-column label="操作" align="center" width="120">
        <template #default>
          <el-button type="text" style="color: #7ac143;">修改</el-button>
          <el-button type="text" style="color: #7ac143;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin: 24px 0;">
      <span>共100条</span>
      <el-pagination
        background
        layout="prev, pager, next, sizes"
        :total="100"
        :page-size="10"
        :page-sizes="[10, 20, 50]"
      />
    </div>
  </div>
</template>

<script setup>
const tableData = Array.from({ length: 8 }).map(() => ({
  type: 'wwww',
  name: 'wwwww',
  myRole: '组员',
  others: 'WWWWW',
  level: 'WWWWW',
  date: '2023-07-06 17:22:42',
  rank: '一等奖',
  teacher: 'Johnny'
}))
</script>

<style scoped>
.filter-bar {
  margin-bottom: 24px;
  border-radius: 12px;
  background: #fafbfc;
  border: none;
}
.table-header {
  background: #7ac143 !important;
  color: #fff !important;
  font-weight: bold;
  font-size: 16px;
}
</style>
